<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="search">
					<wd-search v-model="params.title" @clear="searchChange" @search="searchChange" @blur="searchChange"
						placeholder-left custom-class="wd-search-custom-class-user">
						<template #prefix>
							<cityPicker v-model="params.city" @change="cityPickerChange">
								<text class="addr-text">{{ appCity }}</text>
								<wd-icon name="caret-down-small" color="#FFF" size="42rpx"></wd-icon>
							</cityPicker>
							<!-- #ifdef MP-WEIXIN  -->
							<!-- 	<view class="addr">
								<picker mode="region" @change="pickerChange">
									<text class="addr-text">{{ appCity }}</text>
									<wd-icon name="caret-down-small" color="#FFF" size="42rpx"></wd-icon>
								</picker>
							</view> -->
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN  -->
							<!-- 	<view class="addr" @click="doChoice">
								<text class="addr-text">{{ appCity }}</text>
								<wd-icon name="caret-down-small" color="#FFF" size="42rpx"></wd-icon>
							</view> -->
							<!-- #endif -->
						</template>
						<template #suffix>
							<view class="search-btn" @click="searchChange">
								<wd-icon name="search" size="32rpx" color="#c91c1f"></wd-icon>
							</view>
						</template>
					</wd-search>
				</view>
				<view class="list" v-if="!loading && dataList.length>0">
					<view class="item" v-for="(item,index) in dataList" @click="goPage(item)">
						<view class="msg" @click.prevent.stop="goPage1(item)">
							<text class="iconfont icon-wodezixun"></text>
							立即咨询
						</view>
						<view class="header">
							<view class="avatar">
								<image v-if="item.head" :src="item.head"></image>
								<image v-else src="@/static/logo.png"></image>
							</view>
							<view class="user">
								<view class="name">
									<text>{{ item.realname }}</text>
									<wd-rate size="20rpx" active-color="#C91C1F" num="5" v-model="item.star_nums"
										readonly />
								</view>
								<view class="number">
									服务总数<text>{{ item.service_nums }}</text>单
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="status" v-if="item.is_online===1">
								<wd-badge is-dot bg-color="#11BB65">
								</wd-badge>
								在线
							</view>
							<view class="status" v-if="item.is_online===0">
								<wd-badge is-dot bg-color="#C91C1F">
								</wd-badge>
								离线
							</view>
							<view class="tag" v-if="item.tags">
								<view class="item" v-for="(tag,tIndex) in item.tags">{{
									tag
								}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<wd-status-tip image="search" tip="当前搜索无结果" />
				</view>
			</view>
		</wd-config-provider>
		<!-- #ifndef MP-WEIXIN  -->
		<cityPicker :column="columnCount" :default-value="defaultValue" :mask-close-able="false" @confirm="confirm"
			@cancel="cancel" :visible="visible" />
		<!-- #endif -->
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed, reactive } from 'vue';
	import { useAppStore, useImStore } from '@/store';
	import { onShow } from '@dcloudio/uni-app';
	import { getLawyerList } from "@/api";
	import useDataLoad from '@/hooks/useDataLoad.ts';
	import useRouter from '@/hooks/useRouter.ts';
	// #ifndef MP-WEIXIN
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	// #endif


	export default defineComponent({
		name: '',
		components: {
			// #ifndef MP-WEIXIN
			cityPicker,
			// #endif
		},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const appStore = useAppStore();
			const imStore = useImStore();

			const router = useRouter();

			// 地区选择
			const columnCount = ref(2);
			const defaultValue = ref('');
			const visible = ref(false);
			const params = reactive({
				city: appStore.cityCode,
				title: ""
			} as { city ?: string; title ?: string }); // 初始化参数对象，用于存储搜索条件等数据。
			const dataLoad = useDataLoad(getLawyerList);
			const doChoice = () => {
				visible.value = true;
			}
			const appCity = computed(() => {
				return appStore.city
			})
			const cityCode = computed(() => {
				return appStore.cityCode
			})
			const cityPickerChange = (e : any) => {
				appStore.setCity({
					city: e.label,
					cityCode: e.code// 获取城市代码，根据实际情况修改索引值。
				})
			}
			const searchChange = () => {
				dataLoad.setParams({
					...params,
					city: cityCode.value
				});
				dataLoad.reGetData()
			}
			const cancel = () => {
				visible.value = false; // 关闭弹框
			};

			const goPage = (item) => {
				router.push({
					url: "/im/lawyer/lawyer",
					params: {
						lawyer: item.id
					}, // 传递参数，例如搜索条件等。
				})
			};
			const goPage1 = (item) => {
				// 1 免费
				// 2 通话
				// 3 图文 = 专家
				imStore.doIm(3, item.id)
			};

			onShow(() => {
				let lawyerName : any = uni.getStorageSync('lawyerName'); // 存储搜索的律师名字，以便在律师列表页面使用
				if (lawyerName) {
					params.title = lawyerName;
					dataLoad.setParams({
						...params,
						city: cityCode.value
					});
					dataLoad.reGetData();
					uni.removeStorageSync("lawyerName")
				} else {
					dataLoad.setParams({
						...params,
						city: cityCode.value
					});
					dataLoad.getData();
				}

			})
			return {
				theme,
				...dataLoad,
				// dataList,
				goPage1,
				searchChange,
				params,
				columnCount,
				defaultValue,
				appCity,
				visible,
				doChoice,
				cancel,
				goPage,
				cityPickerChange,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		.search {
			/deep/.city {
				min-width: 151rpx;
				height: 69rpx;
				background: #C91C1F;
				border-radius: 14rpx 0 0 14rpx;
				display: flex;
				align-items: center; // 垂直居中显示文字和图标。
				justify-content: center; // 水平居中显示文字和图标。

				.addr-text {
					font-size: 28rpx;
					font-weight: 700;
					color: #FFF;
					margin: 0 10rpx;
				}
			}

			/deep/.wd-search-custom-class-user {
				background: rgba(255, 255, 255, 1);
				// border: 2rpx solid #c91c1f;
				border-radius: 12rpx;

				padding: 0;


				.search-btn {
					padding-right: 24rpx;
				}

				.wd-search__block {
					background-color: #FFF !important;

					.wd-search__search-left-icon.wd-icon-search {
						display: none;
					}

					.wd-search__input {
						padding-left: 24rpx;
						margin-left: 24rpx;
					}

					.wd-search__cover {
						background-color: #FFF !important;
					}
				}
			}
		}

		.list {
			padding-top: 27rpx;

			>.item {
				min-height: 200rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 2rpx solid #EEEEEE;
				border-radius: 15rpx;
				margin-bottom: 27rpx;
				position: relative;

				.msg {
					width: 138rpx;
					height: 40rpx;
					background: linear-gradient(-33deg, #C91C1F 0%, #CA1C1F 100%);
					border-radius: 25rpx 0 0 25rpx;
					padding: 5rpx 10rpx;
					position: absolute;
					right: 0;
					top: 20rpx;


					font-family: PingFang;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center; // 垂直居中显示文字和图标。
					justify-content: center; // 水平居中显示文字和图标。

					.iconfont {
						margin-right: 12rpx;
					}
				}

				.header {
					display: flex;
					justify-content: space-between; // 水平方向上元素平均分布，两端对齐
					align-items: flex-start; // 垂直方向上元素居中对齐，垂直居中
					padding: 24rpx 24rpx 0 24rpx; // 调整内边距，使元素在容器内居中显示。

					.avatar {
						width: 100rpx; // 设置头像宽度，使元素在容器内居中显示。
						height: 100rpx; // 设置头像高度，使元素在容器内居中显示。
						border-radius: 50rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user {
						width: calc(100% - 100rpx);
						padding-left: 24rpx;

						.name {
							display: flex;
							align-items: center;

							text {
								font-family: PingFang;
								font-weight: 400;
								font-size: 33rpx;
								color: #000000;
							}


							.wd-rate {
								margin-left: 24rpx;

								:deep(.wd-rate__item-star) {
									height: 100% !important;
								}
							}
						}

						.number {
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 18rpx;

							text {
								color: #c91c1f;
							}
						}

						&::after {
							content: " ";
							display: inline-block;
							width: 100%; // 设置为0即可隐藏边框线
							height: 1rpx; // 设置为0即可隐藏边框线
							background-color: #EEEEEE; // 设置为透明即可隐藏边框线
						}
					}

				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 24rpx;

					.status {
						width: 100rpx;
						text-align: center;
						font-family: PingFang;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 24rpx;

						.wd-badge {
							margin-right: 5rpx;
						}
					}

					.tag {
						width: calc(100% - 100rpx - 24rpx);
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;

						.item {
							padding: 10rpx 20rpx;
							background: #F2F2F2;
							border-radius: 15rpx;
							font-family: PingFang;
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							margin-left: 24rpx;
							margin-top: 24rpx;
						}
					}
				}
			}
		}
	}
</style>